<template>
  <div class="about" v-color="bgColor">
    <button v-color="'red'" @click="change('red')">按钮1</button>
    <button v-color="'green'" @click="change('green')">按钮2</button>
    <button v-color="'yellow'" @click="change('yellow')">按钮2</button>
    <div v-color="'pink'">000</div>
    <input type="text" v-fos>
  </div>
</template>
<script>
import {ref} from 'vue'
export default {
     name: 'about',
    setup(props) {
        const bgColor = ref('')
        const change = (val)=>{
            console.log(val);
            bgColor.value = val
        }
        return {change,bgColor}
    },
    directives:{
        // 自定义指令的名字：{
            //   钩子函数
        // }
       color:{
         updated(el,binding,vnode,prevode){
           console.log(el);
           console.log(binding);//对象 里面存放自定义指令的一些参数 value 是值  
            // el.style.background = 'red'
            el.style.background = binding.value
         }
       } 

    }
}
</script>
